<template>
	<view class="mL15 mR15">
		<view class="pT30 pB30">
			<view class="t-center font21 bold">实付金额</view>
			<view class="t-center bold mT10">
				<text class="font14">￥</text>
				<text class="font30 bold">{{ totalAmount }}</text>
			</view>
			<view class="t-center font13 u-8bd mT5">用工押金</view>
		</view>
		<view class="bold font18  pB15">金额明细</view>
		<view class="bgf radius20 pT20 pB10 pL15 pR15">
			<view class="flex jst-between font15 mB10" v-for="(item,i) in amountDetails" :key="i">
				<view class="u-9">{{ item.title }}</view>
				<view class="u-red bold">{{ item.value }}元</view>
			</view>
		</view>
		<view v-if="wxSync">
			<view class="bold font18 pT25 pB15">支付方式</view>
			<view class="bgf radius20 pT20 pB20 pL15 pR15">
				<view class="flex jst-between font15 payItem" v-for="(item,i) in payWayLis" :key="i">
					<view>
						<view class="flex alg-center">
							<image class="payImg" :src="item.imgUrl" mode=""></image>
							<text class="mL10">{{item.typeName}}</text>
						</view>
						<view style="margin-left: 74rpx;" class="u-blue font13 mT10">
							当前余额：{{ item.balance }}
						</view>
					</view>
					<view @click="checkedPay(item,i)">
						<image class="w36" v-if="item.checked" src="/static/image/checked.png" mode=""></image>
						<image class="w36" v-else="item.checked" src="/static/image/noCheck.png" mode=""></image>
					</view>
				</view>
			
			</view>
			
		</view>
		<view class="flex jst-center bottomW" v-if="wxSync">
			<view class="pointer rightNowPay u-f font15 t-center" @click="rightNow">
			  立即支付
			</view>
		</view>
		<xfTipModal ref="tipModal"></xfTipModal>
	</view>
</template>

<script>
	import { findEnterpriseInfoById, refuseOrPg, getBalance } from "@/api/companyInterface/user.js";
	import { signContract, signContractPay } from "@/api/common.js"
	export default {
		data() {
			return {
				payWayLis: [
					{typeName:'余额支付',checked:true,imgUrl: this.resources.iconBalancePay,value:1,balance: 0.00},
					// {
					// 	typeName: '支付宝支付',
					// 	checked: true,
					// 	imgUrl: this.resources.zfbImg,
					// 	value: 1
					// },
					// {
					// 	typeName: '微信支付',
					// 	checked: false,
					// 	imgUrl: this.resources.wxImg,
					// 	value: 0
					// },
					// {
					// 	typeName: '先用后付',
					// 	checked: false,
					// 	imgUrl: this.resources.xyhf,
					// 	value: 3
					// }
				],
				payWay: 0,
				id: '',
				amountDetails: [],
				totalAmount: 0,
				oddJobId: undefined,
				oddUserId: undefined,
				wxSync:null,
				companyId: '',
				isItCertified: false
			}
		},
		async onShow() {
			this.wxSync= await this.xf.getIsShowPay();
		},
		async onLoad(e) {
			this.id = e.id;
			this.oddJobId = e.oddJobId;
			this.oddUserId = e.oddUserId;
			let userInfo = this.xf.onlineUtils.getUserInfo()
			this.companyId = userInfo.companyId
			await this.signContractApi()
			await this.findEnterpriseInfoByIdApi()
			await this.getBalanceApi()
		},
		methods: {
			getBalanceApi(){
				getBalance({}).then(res=>{
					if(res){
						const {result} = res
						this.payWayLis[0].balance = result.data
					}
				})
			},
			findEnterpriseInfoByIdApi(){
				findEnterpriseInfoById({}).then(res=>{
					if(res){
						this.isItCertified = res.result.isItCertified
					}
				})
			},
			signContractApi(){
				signContract({
					oddJobId: this.oddJobId,
					oddUserId: this.oddUserId
				}).then(res=>{
					const {result} = res
					this.amountDetails = result.amountDetails
					this.totalAmount = result.totalAmount
					this.oddJobId = result.oddJobId
				})
			},
			rightNow() {
				if(!this.isItCertified) {
					uni.showToast({
						icon:"none",
						title:"请先认证企业钱包"
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/common/myWallet/index'
						})
					}, 1000)
					return;
				}
				let that = this;
				this.$refs.tipModal.open({
					content: "确认立即支付吗?",
					btnText: "支付",
					showCancel: true,
					success: function() {
						getBalance({}).then(res=>{
							const {result} = res
							if(Number(result.data) < Number(that.totalAmount)){
								return uni.showToast({
									icon:"none",
									title:"余额不足，请充值!"
								})
							} else {
								signContractPay({
									oddJobId: that.oddJobId,
									paymentWay: that.payWay,
									oddUserId: that.oddUserId
								}).then(res=>{
									that.refuseOrPgApi()
								})
							}
						})
						
					}
				})
			},
			async refuseOrPgApi(){
				refuseOrPg([{
					"id": this.id,
					"enrollStatus": "1",
					"enrollStatusText": "已录用"
				}]).then(res => {
					if (res.success == true) {
						uni.showToast({
							icon: 'none',
							title: "支付成功!",
							duration: 2000
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 2
							});
						}, 2000)

					}
				}).catch(err => {

				})
			} ,
			checkedPay(v, i) {
				console.log(i)
				this.payWay = v.value
				this.payWayLis.map((z, index) => {
					z.checked = index === i ? true : false
				})
			}
		}
	}
</script>

<style lang="scss">
	page {

		/* #ifdef MP-WEIXIN */
		height: 100%;
		/* #endif */
		background: linear-gradient(0deg, #F8FAFF, #EBF0FF);

	}
</style>
<style scoped lang="scss">
	.payImg {
		width: 52rpx;
		height: 52rpx;
	}

	.payItem {
		margin-bottom: 48rpx;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.bottomW {
		position: fixed;
		bottom: 40rpx;
		width: 100%;
		left: 0;
	}
</style>